<template>
  <div>
    <dl>
      <dt>各种存取数据的方法</dt>
      <dd>最基础的this.data：{{ objqs }}</dd>
      <dd>然后是$options.name：{{ $options.name }}</dd>
      <dd>这里是this.data：{{ objqs }}</dd>
      <dd>
        <pre>{{ $qs.stringify(objqs) }}</pre>
      </dd>
      <dd>
        然后是$store
        <pre>{{ molle }}</pre>
        <button type="button" @click="test">test</button>
        <button type="button" @click="testGetters">getters</button>
        <button type="button" @click="testMutations">mutations</button>
        <button type="button" @click="testActions">actions</button>
      </dd>
    </dl>

    <!--     
    
    <button type="button" @click="test">test</button> -->
  </div>
</template>

<script>
import {
  mapState, //
  mapGetters, // ...mapGetters('模块名', {当前组件的方法名: '对应模块的 getters 方法',}),
  mapMutations, // ...mapMutations('模块名', {当前组件的方法名: '对应模块的 mutations 方法',}),
  mapActions, // ...mapMutations('模块名', {当前组件的方法名: '对应模块的 actions 方法',}),只是注意返回Promise对象而已
} from 'vuex';

export default {
  name: 'name',
  components: {},
  computed: {
    ...mapState(['molle']),
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      objqs: {
        a: 1,
        b: 2,
      },
    };
  },
  methods: {
    test: function () {
      console.log(this);
    },
    testGetters: function () {
      //调用时要用this.$store.getters['molle/getValue']
      let arg = this.$moment().format('YYYY-MM-DD');
      let r = this.$store.getters['molle/getValue'](arg);
      console.log(`这里可以看到state取值结果【${r.value}】和传参【${r.arg}】`);

      //
      // console.log('this.$route', this.$route);
    },
    testMutations: function () {
      this.$store.commit('molle/setKeyValue', {
        key: 'value',
        value: '重新赋值a',
      });
    },
    testActions: function () {
      this.$store
        .dispatch('molle/ajaxKeyValue', { key: 'msg', value: 'a' })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
